<template>
  <div>
    <el-breadcrumb separator="/">
<!--   el-breadcrumb   用于显示页面当前所在位置-->
      <el-breadcrumb-item :to="{ path: '/welcome' }">通用大数据框架智能计算引擎优化仿真平台</el-breadcrumb-item>
      <el-breadcrumb-item>平台管理</el-breadcrumb-item>
      <el-breadcrumb-item>基础资源</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
<!--      el-card类似通知栏-->
      <el-row :gutter="15">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.query"  class="input-with-select" clearable @clear="getResourcesList" >
            <el-button slot="append" icon="el-icon-search" @click="getResourcesList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="addRescouresVisble = true">上传资源</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="primary"  >设置</el-button>
        </el-col>
      </el-row>
      <el-table
          :data = "ResourcesList"
          border
          style="width: 100%">
        <el-table-column
            prop="resourcesname"
            label="名称"
            width="200">
        </el-table-column>
        <el-table-column
            prop="type"
            label="类型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="uptime"
            label="创建时间"
            width="200">
        </el-table-column>
        <el-table-column
            prop="updateman"
            label="上传人"
            width="200">
        </el-table-column>
        <el-table-column
            prop="size"
            label="所占大小"
            width="200">
        </el-table-column>
        <el-table-column
            prop="operate"
            label="操作"
            width="360">
          <template v-slot="scope">
            <el-tooltip class="item" effect="dark" content="下载文件" placement="top">
              <el-button type="primary" icon="el-icon-download"  @click="RescouresDown(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="编辑文件" placement="top">
              <el-button type="primary" icon="el-icon-edit" @click="editRescoures(scope.row)" ></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除文件" placement="top">
              <el-button type="danger" icon="el-icon-delete"  @click="removeRescoures(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[10,20,30]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <el-dialog
        title="编辑文件"
        :visible.sync="editRescouresVisble"
        width="30%"
        @close="closeediRescouresDialog"
    >

      <el-form :model=" editRescouresParams"  :rules="editRescouresFormRul" ref="editRescouresParamsFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="文件名" prop="filename" >
          <el-input v-model="editRescouresParams.resourcesname"  ></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
     <el-button @click="editRescouresVisble= false">取 消</el-button>
     <el-button type="primary" @click="editRescouresList">确 定</el-button>
     </span>
    </el-dialog>
    <el-dialog
        title="上传文件"
        :visible.sync="addRescouresVisble"
        width="20%"
    >
      <el-form label-width="100px" class="demo-ruleForm">
        <el-select v-model="value" filterable multiple placeholder="请选择文件类型" style="margin-bottom: 20px;">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
        <el-upload
            class="upload-demo"
            ref="upload"
            action="http://localhost:8082/uploadFile"
            :accept= "value.join()"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            multiple
            :file-list="fileList"
            :auto-upload="false"
        >
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitupload">上传到服务器</el-button>
        </el-upload>
      </el-form>
      <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="addRescouresVisble = false">完成</el-button>
     </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data(){
    return{
      ResourcesList:[],
      queryInfo:{
        //查询参数
        query:'',
        pagenum:1,
        pagesize:10
      },
      type:{},
      addRescouresVisble: false,
      fileList: [],
      options: [
        {value: '.txt', label: '文本文档'},
        {value: '.docx', label: 'word文档'},
        {value: '.xlsx', label: '表格'},
      ],
      value: [],
      test:[
        { resourcesid:'01',
          resourcesname:'file01',
          type:'计算代码',
          uptime:'2021-2-20',
          updateman:'老王',
          size:'100M',
          path:''
        },
        {
          resourcesid:'02',
          resourcesname:'file02',
          type:'镜像',
          createtime:'2021-2-20',
          updateman:'老王',
          size:'10M',
          path:''
        },
      ],
      editRescouresFormRul:{},

      editRescouresVisble:false,
      editRescouresParams:{},
      total:'',
    }
  },
  methods: {
    getResourcesList() {
      // this.$http.get('',{params:this.queryInfo}).then(res=>{
      //   if(res.data.meta.status !== 200)
      // return this.$message.error('请求优化方案列表失败')

      // })
      this.ResourcesList = this.test
      this.total = 0
    },
    SizeChange(newsize) {
      this.queryInfo.pagesize = newsize
      this.getResourcesList()
    },
    CurrentChange(newnumber) {
      this.queryInfo.pagenum = newnumber
      this.getResourcesList()
    },
    RescouresDown(row) {
      var name = row.resourcesname;
      var url = row.path;
      const a = document.createElement('a')
      a.setAttribute('download', name)
      a.setAttribute('target', '_blank')
      a.setAttribute('href', "api" + url)
      a.click()
    },
    editRescoures(row) {
      this.editRescouresParams = row
      this.editRescouresVisble = true
      // this.$http.get(`/${row.id}`).then(res=>{
      //   this.editFileParamse= res
      //
      //
      // })
    },
    closeediRescouresDialog() {
      this.$refs.editRescouresParamsFormRef.resetFields()
    },
    editRescouresList() {
      this.$http.put(`/${this.editRescouresParams.resourcesid}`, this.editRescouresParams).then(res => {
        if (res.data.meta.status !== 200) return this.$message.error('更新失败')
        this.getResourcesList()
        this.editRescouresVisble = false
      })
    },
    removeRescoures(row) {
      this.$confirm('此操作将永久删除' + row.resourcesname + ', 是否继续?', '删除文件', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete(`/${row.resourcesid}`).then(res => {
          if (res.data.meta.status !== 200) return this.$message.error('删除失败')
          this.$message.success('删除成功')
          this.getResourcesList()
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //上传文件
    submitupload() {
      this.$refs.upload.submit()
    },
    //文件上传成功提示
    uploadSuccess(res) {
      console.log(res)
      this.$message.success('文件上传成功')
    },
    //文件上传失败提示
    uploadError(err) {
      console.log(err)
      this.$message.error("文件上传失败")
    }
  },
  created() {
    this.getResourcesList()
  }
}
</script>
